package com.znh.kuiklyuniversity.compose.mainPage

import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import com.tencent.kuikly.compose.animation.core.Animatable
import com.tencent.kuikly.compose.animation.core.DurationBasedAnimationSpec
import com.tencent.kuikly.compose.animation.core.LinearEasing
import com.tencent.kuikly.compose.animation.core.RepeatMode
import com.tencent.kuikly.compose.animation.core.animateFloat
import com.tencent.kuikly.compose.animation.core.animateFloatAsState
import com.tencent.kuikly.compose.animation.core.infiniteRepeatable
import com.tencent.kuikly.compose.animation.core.rememberInfiniteTransition
import com.tencent.kuikly.compose.animation.core.repeatable
import com.tencent.kuikly.compose.animation.core.spring
import com.tencent.kuikly.compose.animation.core.tween
import com.tencent.kuikly.compose.foundation.Image
import com.tencent.kuikly.compose.foundation.background
import com.tencent.kuikly.compose.foundation.clickable
import com.tencent.kuikly.compose.foundation.layout.Arrangement
import com.tencent.kuikly.compose.foundation.layout.Box
import com.tencent.kuikly.compose.foundation.layout.Column
import com.tencent.kuikly.compose.foundation.layout.Row
import com.tencent.kuikly.compose.foundation.layout.Spacer
import com.tencent.kuikly.compose.foundation.layout.fillMaxHeight
import com.tencent.kuikly.compose.foundation.layout.fillMaxSize
import com.tencent.kuikly.compose.foundation.layout.fillMaxWidth
import com.tencent.kuikly.compose.foundation.layout.height
import com.tencent.kuikly.compose.foundation.layout.padding
import com.tencent.kuikly.compose.foundation.layout.width
import com.tencent.kuikly.compose.foundation.shape.RoundedCornerShape
import com.tencent.kuikly.compose.material3.Text
import com.tencent.kuikly.compose.resources.DrawableResource
import com.tencent.kuikly.compose.resources.InternalResourceApi
import com.tencent.kuikly.compose.resources.painterResource
import com.tencent.kuikly.compose.ui.Alignment
import com.tencent.kuikly.compose.ui.Modifier
import com.tencent.kuikly.compose.ui.draw.clip
import com.tencent.kuikly.compose.ui.draw.rotate
import com.tencent.kuikly.compose.ui.graphics.Brush
import com.tencent.kuikly.compose.ui.graphics.Color
import com.tencent.kuikly.compose.ui.graphics.graphicsLayer
import com.tencent.kuikly.compose.ui.layout.ContentScale
import com.tencent.kuikly.compose.ui.unit.dp
import com.tencent.kuikly.core.base.BorderStyle
import com.tencent.kuikly.core.base.attr.ImageUri
import com.tencent.kuikly.core.log.KLog
import com.tencent.kuikly.core.pager.Pager
import com.znh.kuiklyuniversity.Border
import com.znh.kuiklyuniversity.backgroundColor
import com.znh.kuiklyuniversity.border
import com.znh.kuiklyuniversity.borderRadius
import com.znh.kuiklyuniversity.compose.model.ToNativalModel
import com.znh.kuiklyuniversity.height
import com.znh.kuiklyuniversity.margin
import com.znh.kuiklyuniversity.padding
import com.znh.kuiklyuniversity.width

@OptIn(InternalResourceApi::class)
@Composable
fun RobotPage(page: Pager) {

    var isRotating by remember { mutableStateOf(false) }


    val roateView by animateFloatAsState(
        targetValue = if (isRotating) 360f else 0f, animationSpec = spring(dampingRatio = 0.5f)
//            infiniteRepeatable(
//            animation = tween(2000, easing = LinearEasing),
//            repeatMode = RepeatMode.Restart
//        )
    )
//
//
    val rotation = remember { Animatable(0f) }
    LaunchedEffect(Unit) {
        rotation.animateTo(
            360f,
            animationSpec = repeatable(
                5, animation = tween(5000)
            ),
//            block = {
//                KLog.i("znh","-------------animatable finish----------------")
//            }
            )
    }


    val infiniteTransition = rememberInfiniteTransition()
    val angleLeft by infiniteTransition.animateFloat(
        initialValue = 0f,
        targetValue = 360f,
        animationSpec = infiniteRepeatable(
            animation = tween(2000, easing = LinearEasing), repeatMode = RepeatMode.Restart
        ),
    )


    Box(
        modifier = Modifier.fillMaxSize()
            .background(Brush.verticalGradient(listOf(Color.White, Color.Transparent))),
        contentAlignment = Alignment.Center
    ) {
        Image(
            contentDescription = "",
            modifier = Modifier.fillMaxSize(),
            contentScale = ContentScale.Crop,
            painter = painterResource(
                DrawableResource(
                    ImageUri.commonAssets(ImageUri.SCHEME_COMMON_ASSETS + "image/bg_image_4.jpg")
                        .toUrl("robot")
                )
            )
        )
        Column(
            modifier = Modifier.fillMaxSize(),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Center,

            ) {
            Row(horizontalArrangement = Arrangement.Center) {
//            头
                Box(
                    modifier = Modifier.margin(top = 40.dp)
                ) {
                    Box(
                        modifier = Modifier.backgroundColor(Color.White)
                            .clip(RoundedCornerShape(topStart = 20.dp, topEnd = 20.dp)).rotate(-65f)
                            .height(30.dp).width(50.dp).clickable {
                                val myLogModule =
                                    page.acquireModule<ToNativalModel>("NativalModule") // 调用acquireModule并传入module名字获取module
                                myLogModule.log("点击了左耳朵") // 调用log打印日志
                            })
                }

                Column(
                    modifier = Modifier.backgroundColor(Color.White)
                        .clip(RoundedCornerShape(topStart = 100.dp, topEnd = 100.dp))
                        .padding(top = 50.dp).height(120.dp).width(200.dp),
                    horizontalAlignment = Alignment.CenterHorizontally
                ) {
                    Row {
                        Box(
                            modifier = Modifier.backgroundColor(Color.Black)
                                .clip(RoundedCornerShape(30.dp)).height(60.dp).rotate(angleLeft)
//                                .graphicsLayer { rotationZ =rotation.value }
                                .width(60.dp), contentAlignment = Alignment.Center
                        ) {
                            Box(
                                modifier = Modifier.backgroundColor(Color.White)
                                    .clip(RoundedCornerShape(20.dp)).height(20.dp).width(20.dp)
                            )

                            Spacer(
                                modifier = Modifier.fillMaxWidth().backgroundColor(Color.White)
                                    .height(1.dp)
                            )
                            Spacer(
                                modifier = Modifier.fillMaxHeight().backgroundColor(Color.White)
                                    .width(1.dp)
                            )
                        }

                        Box(
                            modifier = Modifier.height(40.dp).width(40.dp)
                        )

                        Box(
                            modifier = Modifier.backgroundColor(Color.Black)
                            .clip(RoundedCornerShape(30.dp))
//                                .graphicsLayer { rotationZ = roateView }
                            .graphicsLayer { rotationZ = rotation.value }.clickable {
                                isRotating = !isRotating
                            }.height(60.dp).width(60.dp), contentAlignment = Alignment.Center) {
                            Box(
                                modifier = Modifier.backgroundColor(Color.White)
                                    .clip(RoundedCornerShape(20.dp)).height(20.dp).width(20.dp)
                            )
                            Spacer(
                                modifier = Modifier.fillMaxWidth().backgroundColor(Color.White)
                                    .height(1.dp)
                            )
                            Spacer(
                                modifier = Modifier.fillMaxHeight().backgroundColor(Color.White)
                                    .width(1.dp)
                            )
                        }

                    }
                    Row(modifier = Modifier.padding(top = 15.dp)) {
                        Box(
                            modifier = Modifier.width(70.dp).height(20.dp).borderRadius(10.dp)
                                .border(
                                    Border(
                                        lineWidth = 5.dp,
                                        lineStyle = BorderStyle.DASHED,
                                        color = Color.Red
                                    )
                                )
                        ) {
//                嘴巴
                        }
                    }


                }

                Box(
                    modifier = Modifier.margin(top = 40.dp)
                ) {
                    Box(
                        modifier = Modifier.backgroundColor(Color.White)
                            .clip(RoundedCornerShape(topStart = 20.dp, topEnd = 20.dp)).rotate(65f)
                            .height(30.dp).width(50.dp)
                    )
                }


            }
            Row(modifier = Modifier.padding(top = 5.dp, bottom = 5.dp)) {
//            脖子
                Row(
                    modifier = Modifier.backgroundColor(Color.White).clip(RoundedCornerShape(2))
                        .height(20.dp).width(180.dp)
                ) { }
            }

            Row {
//            身体
                Row(
                    modifier = Modifier.backgroundColor(Color.White).padding(end = 5.dp)
                        .clip(RoundedCornerShape(5.dp)).height(130.dp).width(40.dp)
                ) { }
                Box(modifier = Modifier.width(5.dp))
                Row(
                    modifier = Modifier.backgroundColor(Color.White).clip(RoundedCornerShape(5.dp))
                        .height(170.dp).width(200.dp)
                ) { }

                Box(modifier = Modifier.width(5.dp))
                Row(
                    modifier = Modifier.backgroundColor(Color.White).clip(RoundedCornerShape(5.dp))
                        .height(130.dp).width(40.dp)
                ) { }
            }
            Row(
                modifier = Modifier.padding(top = 5.dp), horizontalArrangement = Arrangement.Center
            ) {
//            脚
                Text(
                    text = "", modifier = Modifier.backgroundColor(Color.White).clip(
                        RoundedCornerShape(
                            topStart = 5.dp, topEnd = 5.dp, bottomEnd = 30.dp, bottomStart = 30.dp
                        )
                    ).height(70.dp).width(55.dp)
                )
                Box(modifier = Modifier.width(50.dp))
                Text(
                    text = "", modifier = Modifier.backgroundColor(Color.White).clip(
                        RoundedCornerShape(
                            topStart = 5.dp, topEnd = 5.dp, bottomEnd = 30.dp, bottomStart = 30.dp
                        )
                    ).height(70.dp).width(55.dp)
                )
            }
        }
    }

}